<template>
  <div id="login">
    <van-nav-bar title="登陆/注册" left-arrow @click-left="$router.back()" />

    <van-form
      :show-error="false"
      :show-error-message="false"
      @submit="onLogin"
      @failed="onFailed"
    >
      <van-field
        v-model="mobile"
        center
        left-icon="phone-o"
        name="手机号"
        placeholder="在此输入手机号"
        :rules="rules.mobile"
      />
      <van-field
        center
        v-model="code"
        left-icon="chat-o"
        name="验证码"
        placeholder="输入验证码"
        :rules="rules.code"
      >
        <template #button>
          <van-button
            v-if="isShow"
            plain
            size="small"
            native-type="button"
            type="info"
            :disabled="!isShow"
            @click="getCode"
            >获取验证码</van-button
          >
          <van-count-down
            v-else
            :time="1000 * 60"
            format="ss 秒"
            @finish="closeShow"
          />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登 陆</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { login } from '@/api/user'
import { Toast } from 'vant'
export default {
  name: 'login',
  data () {
    return {
      mobile: '13797323220',
      code: '123456',
      isShow: true,
      rules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式错误'
          }
        ],
        code: [
          { required: true, message: '请填写手机号' },
          {
            pattern: /^\d{6}$/,
            message: '验证码位数错误'
          }
        ]
      }
    }
  },
  created () {},
  methods: {
    async onLogin (values) {
      Toast.loading({
        message: '登陆中...',
        forbidClick: true,
        duration: 0
      })

      try {
        const { data } = await login({
          mobile: this.mobile,
          code: this.code
        })
        this.$store.commit('setToken', data.data)
        Toast.success('登陆成功')
        this.$store.commit('removeCache', 'Layout')
        this.$router.push(this.$route.query.redirect || '/')
      } catch (error) {
        Toast.fail(`${error.response.data.message}`)
        return error
      }
    },
    onFailed (error) {
      if (error.errors[0]) {
        Toast({
          message: `${error.errors[0].message}`,
          position: 'top'
        })
      }
    },
    getCode () {
      this.isShow = false
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '倒计时 3 秒'
      })

      let second = 3
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `倒计时 ${second} 秒`
        } else {
          clearInterval(timer)
          this.code = 123456
          // 手动清除 Toast
          Toast.clear()
        }
      }, 1000)
    },
    // 关闭倒计时
    closeShow () {
      this.isShow = true
    }
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  mounted () {}
}
</script>

<style lang="less"></style>
